<template>
  <div>
    <!-- 筛选区 -->
    <div class="exam-filter">
      <el-row>
        <el-form :inline="true" size="small">
          <el-col :span="6">
            <el-form-item l label="考试名称">
              <el-input
                v-model.trim="query.exam_name"
                placeholder="考试名称"
                clearable
                @clear="get_list"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item l label="学科名称">
              <el-select
                v-model="query.subject_id"
                placeholder="归属学科"
                clearable
                @change="query.directory_id = ''"
                @clear="get_list"
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item l label="学科名称">
              <el-select
                v-model="query.directory_id"
                placeholder="归属目录"
                clearable
                @clear="get_list"
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item l label="考试类型">
              <el-select
                v-model="query.exam_type"
                placeholder="请选择"
                clearable
                @clear="get_list"
              >
                <el-option label="阶段考核" :value="1" />
                <el-option label="综合考试" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item l label="锁屏方式">
              <el-select
                v-model="query.lock_screen"
                placeholder="请选择"
                clearable
                @clear="get_list"
              >
                <el-option label="不锁屏" :value="1" />
                <el-option label="锁屏" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建的人">
              <el-input
                v-model="query.create_name"
                placeholder="请输入"
                clearable
                @change="get_list"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="1.5">
            <el-form-item>
              <el-button type="primary" plain @click="searchsubmit"
                >搜索</el-button
              >
              <el-button @click="searchcancel">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <!-- 列表 -->
    <div class="table-bg">
      <el-table v-loading="loading" :data="list" border>
        <el-table-column label="序号" width="60" align="center" type="index" />
        <el-table-column label="考试信息" align="center">
          <template slot-scope="scope">
            <p class="row">
              考试ID:<b>{{ scope.row.id }}</b>
              考试名称:
              <el-link type="primary" :underline="false">{{
                scope.row.exam_name
              }}</el-link>
              归属学科:<b>{{ scope.row.subject_name }}</b> 归属目录:<b>{{
                scope.row.directory_name
              }}</b>
            </p>
            <p class="row">
              考试类型:<b>{{
                ["阶段考核", "综合考试"][scope.row.exam_type - 1]
              }}</b>
              考试方式:<b>{{
                ["不锁屏", "锁屏"][scope.row.lock_screen - 1]
              }}</b>
              创建人:<b>{{ scope.row.create_name }}</b> 创建时间:<b>{{
                scope.row.created_at | formatDate
              }}</b>
              试卷信息:
              <el-tag type="primary" size="mini" @click="seePaper(scope.row)"
                >点击查看</el-tag
              >
              推送班级信息:
              <el-tag
                v-if="scope.row.exam_bind_class.length"
                type="primary"
                size="mini"
                @click="seeClass(scope.row)"
                >点击查看</el-tag
              >
              <b v-else>暂无</b>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="推送班级"
              placement="top"
            >
              <el-button
                icon="el-icon-connection"
                type="warning"
                circle
                size="small"
                @click="bindClass({ ...scope.row })"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                v-if="!scope.row.exam_bind_class.length"
                type="danger"
                icon="el-icon-delete"
                size="small"
                circle
                @click="del(scope.row.id)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <Pagination
      :total="total"
      :page.sync="page"
      :limit.sync="limit"
      @pagination="pagination_change"
    /> -->

    <!-- 试卷弹层 -->
    <el-dialog
      title="考试试卷信息"
      :visible="paperList.length > 0"
      width="30%"
      @close="paperList = []"
    >
      <p class="l40">
        主考试卷： <el-link type="primary">{{ paperList[0] }}</el-link>
      </p>
      <span slot="footer">
        <el-button type="primary" size="small" @click="paperList = []"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 班级列表弹框 -->
    <el-dialog
      title="班级列表"
      :visible="classList.length > 0"
      width="40%"
      @close="bindClassCancel"
    >
      <el-radio-group v-model="bindClassId">
        <el-radio
          v-for="item in classList"
          :key="item.id"
          class="radio-row"
          :label="item.id"
          >{{ item.class_name }}</el-radio
        >
        <br />
      </el-radio-group>
      <span slot="footer">
        <el-button type="primary" size="small" @click="bindClassSubmit"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 推送班级弹框列表信息 -->
    <el-dialog
      title="已推送信息"
      :visible="sendClassList.length > 0"
      width="60%"
      @close="sendClassList = []"
    >
      <el-table :data="sendClassList" border>
        <el-table-column prop="class_name" width="200px" label="班级名称" />
        <el-table-column label="考试状态">
          <template slot-scope="scope">
            <p class="blue">
              <b>主考：</b>
              <span v-if="scope.row.main_exam_status == 1">待设定时间</span>
              <span v-if="scope.row.main_exam_status == 2">待考试</span>
              <span v-if="scope.row.main_exam_status == 3">考试中</span>
              <span v-if="scope.row.main_exam_status == 4">待发布成绩</span>
              <span v-if="scope.row.main_exam_status == 5">已公布成绩</span>
              <span v-if="scope.row.main_exam_status > 1">
                | {{ scope.row.exam_time_start | formatDate }}</span
              >
              <b>补考：</b>
              <span v-if="scope.row.help_exam_status == 1">待设定时间</span>
              <span v-if="scope.row.help_exam_status == 2">待考试</span>
              <span v-if="scope.row.help_exam_status == 3">考试中</span>
              <span v-if="scope.row.help_exam_status == 4">待发布成绩</span>
              <span v-if="scope.row.help_exam_status == 5">已公布成绩</span>
              <span v-if="scope.row.help_exam_status > 1">
                | {{ scope.row.exam_time_start | formatDate }}</span
              >
            </p>
          </template>
        </el-table-column>
        <el-table-column width="100px" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.main_exam_status == 1"
              type="text"
              @click="cancelBindClass(scope.row)"
              >解除绑定</el-button
            >
            <el-button v-else-if="scope.row.main_exam_status == 5" type="text"
              >查看成绩</el-button
            >
            <span v-else>暂无操作</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button type="primary" size="small" @click="sendClassList = []"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 推送结束 -->
  </div>
</template>
<script>
import {
  getExamList,
  deleteExam,
  bindClass,
  getClassList,
} from "@/api/exam.js";
import list from "@/mixins/list";
import { mapGetters, mapActions } from "vuex";
// import Pagination from "@/components/Pagination";

const defaultItem = {
  exam_name: "",
  subject_id: "",
  directory_id: "",
  exam_type: "",
  lock_screen: "",
  create_name: "",
  create_time: "",
};
export default {
  // components: { Pagination },
  name: "List",
  mixins: [list],
  data() {
    return {
      query: {
        ...defaultItem,
      },
      time: [],
      paperList: [], // 考试的试卷信息
      classList: [], //  班级的列表
      bindClassId: null, // 推送班级ID
      bindExamInfo: {}, // 推送考试信息
      sendClassList: [], // 考试已推送班级列表信息
    };
  },
  computed: {
    ...mapGetters({
      treeList: "subject/treeList",
    }),
    // 目录信息
    directoryList() {
      console.log(11111, this.query);
      if (!this.query.subject_id) {
        // console.log(this.query.subject_id);
        console.log(112222222);

        return [];
      } else {
        console.log(2222);
        const result = this.treeList.find(
          (val) => val.id === this.query.subject_id
        );
        return result.children;
      }
    },
    createTime() {
      console.log(22222222222);
      if (this.time.length) {
        return this.time.map((val) => val.getTime()).join(",");
      } else {
        return "";
      }
    },
  },
  mounted() {
    !this.treeList.length && this.loadTreeList();
  },

  methods: {
    ...mapActions({
      loadTreeList: "subject/loadTreeList",
    }),
    // 获取列表
    async get_list() {
      console.log(33333333);
      try {
        const { query, page, limit } = this;

        //试卷列表的信息
        const res = await getExamList({ ...query, page, limit });
        console.log(44444444, res.list);
        console.log(66666666, res.list.exam_bind_class);
        this.list = res.list;
        this.total = res.total;
        // console.log("55555555", res.total);
      } catch (error) {
        console.log(error);
      }
      this.loading = false;
    },
    // 删除考试
    async del(id) {
      try {
        await this.$confirm("确定删除吗,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      } catch (e) {
        return this.$message.info("已取消");
      }
      await deleteExam(id);
      this.$message.success("删除成功");
      // 页码退1
      if (this.page * 1 !== 1 && this.list.length === 1) {
        this.$emit("update:page", this.page - 1);
      }
      this.get_list();
    },
    // 搜索确定
    searchsubmit() {
      this.page = 1;
      this.get_list();
      console.log("搜索------------------", this.get_list());
    },
    // 搜索取消
    searchcancel() {
      this.page = 1;
      this.query = { ...defaultItem };
      this.get_list();
    },
    // 查看试卷
    seePaper(val) {
      this.paperList = [val.main_paper_name];
    },
    // 推送班级
    async bindClass(row) {
      console.log("rowwwwwwww222222222222222222222222", row);
      const data = await getClassList({
        subject_id: row.subject_id,
        state: 1,
      });
      this.bindExamInfo = row;

      this.classList = data.list;
      console.log("---推送班级测试");
    },
    // 绑定提交
    async bindClassSubmit() {
      console.log("提交测试----");
      await bindClass({
        class_id: this.bindClassId,
        main_paper_id: this.bindExamInfo.main_paper_id,
        exam_id: this.bindExamInfo.id,
      });
      console.log("---行?");
      this.$message.success("推送成功");
      this.get_list();
      this.bindClassCancel();
    },
    // 绑定取消
    bindClassCancel() {
      this.classList = [];
      this.checkedClassId = null;
      this.bindExamInfo = {};
    },
    // 解除考试和班级的绑定（只有在没有设定考试时间情况下才可以）
    async cancelBindClass(row) {
      try {
        await this.$confirm("确定解绑吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      } catch (e) {
        return this.$message.info("已取消");
      }
      await bindClass({
        class_id: row.class_id,
        exam_id: row.exam_id,
        del: true, // 带上true表示解绑
      });
      this.$message.success("解绑成功");
      this.get_list();
      this.sendClassList = [];
    },
    // 查看考试绑定班级
    seeClass(val) {
      this.sendClassList = val.exam_bind_class;
    },
  },
};
</script>
<style scoped>
.exam-filter {
  background-color: #fff;
  padding: 0 16px;
}
.el-date-editor.el-input__inner {
  width: 260px;
}
.question-list .el-form-item {
  margin-bottom: 10px;
}
.row {
  text-align: left;
  color: #333;
  line-height: 30px;
}
.row b {
  margin-right: 20px;
  font-weight: normal;
  color: #666;
}
.row .el-tag {
  cursor: pointer;
  margin-right: 20px;
}
.el-link {
  margin-right: 20px;
}
.l40 {
  line-height: 40px;
  margin-left: 20px;
}
.radio-row {
  line-height: 30px;
  display: block;
  margin-left: 60px;
}
.blue b {
  font-weight: normal;
  color: #66b1ff;
  margin-left: 15px;
}
.table-bg {
  padding: 20px;
}
</style>
